<!--
 * @Version: 1.0
 * @Date: 2021-04-10 10:28:35
 * @LastEditTime: 2021-07-05 10:52:18
 * @Description:
-->
<template>
  <div>
    <el-dialog :center="true" :title="title" :visible.sync="formVisible" width="60%" :before-close="() => {$emit('update:formVisible', false)}" @open="openDialog">
      <div v-loading="loadingDialog">
        <div class="header_title_box">
          <h2 style="margin-right:50px">
            发货单信息
          </h2>
        </div>
        <el-form :model="dataObj" inline label-width="150px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="发货单号：">
                <span>{{ dataObj.invoice_no }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单编号：">
                <span>{{ dataObj.order_no }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="平台订单编号：">
                <span class="width200">{{ dataObj.platform_no }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="平台订单编号2：">
                <span class="width200">{{ dataObj.platform_no_ext }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单类型：">
                <span>{{ dataObj.order_delivery_type === 1? '整单发货': '拆分发货' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发货单状态：">
                <span>{{ dataObj.logistics_status === 1 ? '成功发货订单' : '异常发货订单' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核状态：">
                <span>{{ dataObj.status ? '审核通过' : '待审核' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人：">
                <span>{{ dataObj.creator_name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间：">
                <span>{{ dataObj.created_at }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <el-table :data="product" border>
            <el-table-column align="center" label="缩略图" prop="goods_pic">
              <template>
                <el-image style="width: 50px; height: 50px" fit="contain" :src="dataObj.goods_pic">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column align="center" label="商品名称" prop="name" />
            <el-table-column align="center" label="系统sku" prop="goods_code" />
            <el-table-column align="center" label="属性" prop="variation" />
            <el-table-column align="center" label="单价" prop="transaction_price_value">
              <template slot-scope="scope">
                <app-price :price="scope.row.transaction_price_value" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="币别" prop="transaction_price_currencyid" />
            <el-table-column align="center" label="数量" prop="quantity_purchased" />
            <el-table-column align="center" label="金额(含税3)" prop="all_total">
              <template slot-scope="scope">
                <app-price :price="scope.row.all_total" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="税费" prop="tax_amount_value">
              <template slot-scope="scope">
                <app-price :price="scope.row.tax_amount_value" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="发货仓库" prop="warehouse_name">
              <template>
                {{ dataObj.en_name }}-{{ dataObj.$vi_name }}
              </template>
            </el-table-column>
            <!-- <el-table-column label="库存量" prop="goods_pic" />
            <el-table-column label="最近调拨仓库" prop="goods_pic" />
            <el-table-column label="库存量" prop="goods_pic" /> -->
          </el-table>
        </div>
        <div>
          <div class="header_title_box">
            <h2 style="margin-right:50px">
              收货人信息
            </h2>
          </div>
          <div>
            <el-form :model="address" inline label-width="150px">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="姓名：">
                    <span>{{ address.address_name }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="买家电话：">
                    <span>{{ address.address_phone }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="买家邮箱：" style="display: inline-flex;">
                    <span>{{ address.address_email }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="国家：">
                    <span>{{ address.address_country }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="州/省：">
                    <span>{{ address.address_stateorprovince }}</span>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="城市：">
                    <span>{{ address.address_cityname }}</span>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="邮编：">
                    <span>{{ address.address_postalcode }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="街道1：">
                    <span>{{ address.address_street1 }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="街道2：">
                    <span>{{ address.address_street2 }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="街道3：">
                    <span>{{ address.address_street3 }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <div style="text-align: center; margin-top:50px">
          <el-button type="primary" :loading="isbtn" @click="submitForm('ruleForm')">确认发货单</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { accMul } from '@/utils/index'
export default {
  props: {
    formVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '发货单信息'
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dataObj: {},
      loadingDialog: false,
      isbtn: false,
      product: [],
      address: {}
    }
  },
  methods: {
    // 关闭
    handleCancel() {
      this.$emit('update:formVisible', false)
    },
    openDialog() {
      this.loadingDialog = true
      this.$http.post('/deliveryInfo', { 'order_id': this.id, type: 1 }).then((res) => {
        if (res.code === 10000) {
          this.dataObj = res.data
          this.product = res.data.product.map((arr) => {
            // arr.all_total = (arr.transaction_price_value * arr.quantity_purchased) + arr.tax_amount_value
            arr.all_total = accMul(arr.transaction_price_value, arr.quantity_purchased)
            return arr
          })
          this.address = res.data.user_addres
          this.loadingDialog = false
        }
        this.loadingDialog = false
      })
    },
    // 确认发货单
    submitForm() {
      this.$http.post(`/confirmDeliver/${this.id}`).then((res) => {
        if (res.code === 10000) {
          this.$message.success('发货单确认成功')
          this.$emit('handleSearch')
          this.handleCancel()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
